<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头像生成测试工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409EFF',
                        success: '#67C23A',
                        warning: '#E6A23C',
                        danger: '#F56C6C',
                        info: '#909399'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .avatar-shadow {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }
            .avatar-hover {
                transition: all 0.3s ease;
            }
            .avatar-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
            }
            .card-transition {
                transition: all 0.3s ease;
            }
            .card-transition:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter min-h-screen">
    <div class="container mx-auto px-4 py-12 max-w-5xl">
        <header class="text-center mb-12">
            <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-gray-800 mb-4">头像生成测试工具</h1>
            <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                测试系统的自动头像生成功能，支持多种用户名和自定义尺寸的头像预览
            </p>
        </header>

        <main>
            <!-- 基本测试区域 -->
            <section class="bg-white rounded-xl shadow-lg p-8 mb-10 card-transition">
                <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                    <i class="fa fa-user-circle text-primary mr-3"></i>
                    基本头像测试
                </h2>
                
                <div class="flex flex-col md:flex-row items-start md:items-center gap-4 mb-8">
                    <label for="username" class="text-gray-700 font-medium w-full md:w-24">用户名:</label>
                    <input 
                        type="text" 
                        id="username" 
                        class="w-full md:flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                        placeholder="请输入用户名"
                        value="张三"
                    >
                    <button 
                        id="generateBtn" 
                        class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow hover:shadow-md flex items-center justify-center"
                    >
                        <i class="fa fa-refresh mr-2"></i>
                        生成头像
                    </button>
                </div>

                <div class="flex flex-col md:flex-row gap-6 items-center">
                    <div class="w-full md:w-1/3 flex flex-col items-center">
                        <div id="avatarPreview" class="mb-4 avatar-shadow avatar-hover"></div>
                        <div class="text-center">
                            <p class="text-sm text-gray-500 mb-1">生成的头像</p>
                            <p id="avatarSize" class="text-xs text-gray-400">48x48 px</p>
                        </div>
                    </div>
                    
                    <div class="w-full md:w-2/3 bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3">头像数据 (Base64)</h3>
                        <textarea 
                            id="avatarData" 
                            class="w-full h-40 p-4 bg-white border border-gray-200 rounded-lg text-xs md:text-sm font-mono resize-none focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                            readonly
                        ></textarea>
                        <div class="mt-3 flex justify-end">
                            <button 
                                id="copyBtn" 
                                class="px-4 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded transition-all flex items-center"
                            >
                                <i class="fa fa-copy mr-1"></i>
                                复制
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 多尺寸测试区域 -->
            <section class="bg-white rounded-xl shadow-lg p-8 mb-10 card-transition">
                <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                    <i class="fa fa-th-large text-primary mr-3"></i>
                    多尺寸头像预览
                </h2>
                
                <div id="multiSizePreview" class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 gap-4 md:gap-6">
                    <!-- 多尺寸头像将在这里生成 -->
                </div>
            </section>

            <!-- 批量测试区域 -->
            <section class="bg-white rounded-xl shadow-lg p-8 mb-10 card-transition">
                <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                    <i class="fa fa-users text-primary mr-3"></i>
                    批量用户名测试
                </h2>
                
                <div class="mb-6">
                    <label for="batchUsernames" class="text-gray-700 font-medium block mb-2">多个用户名 (每行一个):</label>
                    <textarea 
                        id="batchUsernames" 
                        class="w-full h-32 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                        placeholder="请输入多个用户名，每行一个"
                    >
张三
李四
王五
赵六
孙七
周八
吴九
郑十
管理员
测试用户</textarea>
                </div>
                
                <button 
                    id="batchGenerateBtn" 
                    class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow hover:shadow-md flex items-center"
                >
                    <i class="fa fa-image mr-2"></i>
                    生成批量头像
                </button>
                
                <div id="batchPreview" class="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
                    <!-- 批量头像将在这里生成 -->
                </div>
            </section>

            <!-- 加载优化测试区域 -->
            <section class="bg-white rounded-xl shadow-lg p-8 card-transition">
                <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                    <i class="fa fa-bolt text-primary mr-3"></i>
                    加载性能测试
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3">测试参数</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="loadCount" class="text-gray-700 font-medium block mb-1">头像数量:</label>
                                <input 
                                    type="number" 
                                    id="loadCount" 
                                    min="1" 
                                    max="500" 
                                    value="100" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                                >
                            </div>
                            <button 
                                id="performanceTestBtn" 
                                class="w-full px-4 py-2 bg-warning text-white rounded-lg hover:bg-warning/90 transition-all shadow hover:shadow-md"
                            >
                                <i class="fa fa-tachometer mr-1"></i>
                                运行性能测试
                            </button>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3">测试结果</h3>
                        <div class="space-y-2">
                            <p><span class="text-gray-700 font-medium">生成时间:</span> <span id="generationTime" class="text-primary">--</span></p>
                            <p><span class="text-gray-700 font-medium">平均每个头像:</span> <span id="avgTime" class="text-primary">--</span></p>
                            <p><span class="text-gray-700 font-medium">数据大小:</span> <span id="dataSize" class="text-primary">--</span></p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3">优化建议</h3>
                        <ul class="text-sm text-gray-700 space-y-1 list-disc list-inside" id="optimizationTips">
                            <li>当前头像实现已采用SVG格式，具有良好的性能</li>
                            <li>通过颜色哈希算法确保用户头像一致性</li>
                            <li>建议实际项目中考虑头像缓存策略</li>
                        </ul>
                    </div>
                </div>
                
                <div id="performanceTestContainer" class="mt-6 hidden overflow-auto max-h-64 bg-gray-100 p-4 rounded-lg">
                    <!-- 性能测试结果将在这里显示 -->
                </div>
            </section>
        </main>

        <footer class="mt-16 text-center text-gray-500 text-sm">
            <p>头像生成测试工具 - 测试系统的自动头像功能</p>
            <p class="mt-1">© 2024 测试平台</p>
        </footer>
    </div>

    <script>
        // 头像颜色选项列表
        const avatarColors = [
            '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399',
            '#C06C84', '#6C5CE7', '#00B894', '#0984E3', '#FF7675'
        ];

        // 根据用户名生成一致的哈希值
        function getColorHash(name) {
            if (!name) return 0;
            let hash = 0;
            for (let i = 0; i < name.length; i++) {
                hash = name.charCodeAt(i) + ((hash << 5) - hash);
                hash = hash & hash; // 转换为32位整数
            }
            return Math.abs(hash);
        }

        // 生成默认SVG头像的函数
        function generateDefaultAvatar(name, size = 48) {
            // 默认使用第一个字符
            const char = name && name.length > 0 ? name.charAt(0) : '未';
            // 根据用户名获取一致的颜色
            const colorIndex = getColorHash(name) % avatarColors.length;
            const bgColor = avatarColors[colorIndex];
            
            // 创建圆形头像SVG
            return `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22${size}%22%20height%3D%22${size}%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20${size}%20${size}%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Ccircle%20cx%3D%22${size/2}%22%20cy%3D%22${size/2}%22%20r%3D%22${size/2}%22%20fill%3D%22${encodeURIComponent(bgColor)}%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%22${Math.floor(size * 0.42)}%22%20font-weight%3D%22bold%22%20text-anchor%3D%22middle%22%20dy%3D%22.35em%22%20fill%3D%22white%22%3E${encodeURIComponent(char)}%3C%2Ftext%3E%3C%2Fsvg%3E`;
        }

        // 基本头像生成功能
        document.getElementById('generateBtn').addEventListener('click', function() {
            const username = document.getElementById('username').value.trim() || '未登录用户';
            const avatarUrl = generateDefaultAvatar(username);
            
            // 显示头像预览
            const previewElement = document.getElementById('avatarPreview');
            previewElement.innerHTML = `<img src="${avatarUrl}" alt="${username}" class="w-24 h-24 rounded-full">`;
            
            // 显示头像数据
            const dataElement = document.getElementById('avatarData');
            dataElement.value = avatarUrl;
            
            // 更新头像尺寸信息
            document.getElementById('avatarSize').textContent = '48x48 px';
            
            // 生成多尺寸预览
            generateMultiSizePreview(username);
        });

        // 复制头像数据
        document.getElementById('copyBtn').addEventListener('click', function() {
            const dataElement = document.getElementById('avatarData');
            dataElement.select();
            document.execCommand('copy');
            
            // 显示复制成功提示
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="fa fa-check mr-1"></i>已复制';
            setTimeout(() => {
                this.innerHTML = originalText;
            }, 2000);
        });

        // 生成多尺寸头像预览
        function generateMultiSizePreview(username) {
            const sizes = [24, 32, 48, 64, 96];
            const container = document.getElementById('multiSizePreview');
            container.innerHTML = '';
            
            sizes.forEach(size => {
                const avatarUrl = generateDefaultAvatar(username, size);
                const item = document.createElement('div');
                item.className = 'flex flex-col items-center';
                item.innerHTML = `
                    <div class="avatar-shadow avatar-hover mb-2">
                        <img src="${avatarUrl}" alt="${username} (${size}x${size})" class="w-${size} h-${size} rounded-full">
                    </div>
                    <span class="text-xs text-gray-500">${size}x${size}</span>
                `;
                container.appendChild(item);
            });
        }

        // 批量生成头像
        document.getElementById('batchGenerateBtn').addEventListener('click', function() {
            const textarea = document.getElementById('batchUsernames');
            const usernames = textarea.value.split('\n')
                .map(name => name.trim())
                .filter(name => name);
            
            const container = document.getElementById('batchPreview');
            container.innerHTML = '';
            
            usernames.forEach(username => {
                const avatarUrl = generateDefaultAvatar(username);
                const item = document.createElement('div');
                item.className = 'flex flex-col items-center';
                item.innerHTML = `
                    <div class="avatar-shadow avatar-hover mb-2">
                        <img src="${avatarUrl}" alt="${username}" class="w-16 h-16 rounded-full">
                    </div>
                    <span class="text-xs text-gray-700 text-center">${username}</span>
                `;
                container.appendChild(item);
            });
        });

        // 性能测试
        document.getElementById('performanceTestBtn').addEventListener('click', function() {
            const count = parseInt(document.getElementById('loadCount').value) || 100;
            const container = document.getElementById('performanceTestContainer');
            container.innerHTML = '';
            container.classList.remove('hidden');
            
            // 显示测试开始信息
            const startInfo = document.createElement('div');
            startInfo.className = 'text-gray-700 mb-2';
            startInfo.textContent = `正在生成 ${count} 个头像...`;
            container.appendChild(startInfo);
            
            // 开始计时
            const startTime = performance.now();
            let totalSize = 0;
            
            // 生成头像
            const usernames = [];
            for (let i = 1; i <= count; i++) {
                usernames.push(`用户${i}`);
            }
            
            const avatars = usernames.map(username => {
                const avatar = generateDefaultAvatar(username);
                totalSize += new Blob([avatar]).size;
                return { username, avatar };
            });
            
            // 结束计时
            const endTime = performance.now();
            const totalTime = endTime - startTime;
            const avgTime = totalTime / count;
            const sizeInKB = (totalSize / 1024).toFixed(2);
            
            // 更新测试结果
            document.getElementById('generationTime').textContent = `${totalTime.toFixed(2)} ms`;
            document.getElementById('avgTime').textContent = `${avgTime.toFixed(4)} ms`;
            document.getElementById('dataSize').textContent = `${sizeInKB} KB`;
            
            // 显示完成信息
            const resultInfo = document.createElement('div');
            resultInfo.className = 'text-green-600 font-medium';
            resultInfo.textContent = `测试完成！生成 ${count} 个头像耗时 ${totalTime.toFixed(2)} ms`;
            container.appendChild(resultInfo);
            
            // 仅显示前20个头像作为预览
            const previewCount = Math.min(count, 20);
            const previewContainer = document.createElement('div');
            previewContainer.className = 'mt-4 grid grid-cols-10 gap-2';
            
            for (let i = 0; i < previewCount; i++) {
                const img = document.createElement('img');
                img.src = avatars[i].avatar;
                img.alt = avatars[i].username;
                img.className = 'w-8 h-8 rounded-full';
                previewContainer.appendChild(img);
            }
            
            if (count > previewCount) {
                const moreInfo = document.createElement('div');
                moreInfo.className = 'text-gray-500 text-xs mt-2';
                moreInfo.textContent = `... 还有 ${count - previewCount} 个头像未显示`;
                previewContainer.appendChild(moreInfo);
            }
            
            container.appendChild(previewContainer);
        });

        // 初始化页面
        window.addEventListener('load', function() {
            // 触发一次生成按钮的点击，显示默认头像
            document.getElementById('generateBtn').click();
            // 生成批量测试的头像
            document.getElementById('batchGenerateBtn').click();
        });
    </script>
</body>
</html>